<div
#anchorRef
[style.left.px]="LogicApi.options.X "
[style.top.px]="LogicApi.options.Y"
>
    <template #conn></template>
    <div class="img-container" (mousedown)="handleMousedown( $event )" (touchstart)="handleMousedown($event)"
    (click)="handleClick($event)">
        <img src="./assets/api.svg">
    </div>
</div>
<div style="display:none">
    <div #options>
        <div>
            <div class="options-type-container">
                <span class="property-name">Type: <info-tooltip [Message]="'Changes the type of an API. This can change the behaviour of endpoints.'"></info-tooltip></span>
                <div>
                    <mat-form-field appearance="fill" class="action-endpoint">
                        <mat-select (selectionChange)="handleTypeChange(); afterChange()" [(ngModel)]="LogicApi.options.type">
                            <mat-option *ngFor="let type of APITypeKeys" [value]="type">{{APIType[type]}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
            </div>
            <endpoint-select
            [Model]="LogicApi"
            [Type]="LogicApi.options.type"
            [AfterChange]="afterChange"
            [ConnectableEndpoints]="connectableEndpoints"
            ></endpoint-select>
        </div>
    </div>
    <div #simulations>
        <slider-described
        [Model]="LogicApi"
        [AfterChange]="afterChange"
        ></slider-described>
    </div>
</div>
